<template>
    <div>
        <!-- 搜索框 -->
        <van-search
            v-model="value"
            shape="round"
            background="#fff"
            placeholder="请输入搜索关键词"
            disabled
            @click="showPopup()"
        />
        <!-- 搜索框/ -->
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" 
            :autoplay="3000" 
            indicator-color="white">
            <van-swipe-item v-for="item in banners" :key="item.id">
                <img :src="item.image_url" width="100%" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 轮播图/ -->
        <!-- 五个居家 -->
        <van-grid :column-num="5" >
            <van-grid-item  v-for="item in channels" :key="item.id"  :icon="item.icon_url" :text="item.name" @click="shouyefenlei()"/>
        </van-grid>
        <!-- 居家/ -->

        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>
 
        
        <div v-show="$route.path=='/home'" >
            <!-- 品牌制造商直供 -->
            <div class="pinpaizhizao">
                <div><p class="pinpaiwenzi">品牌制造商直供</p></div>
                <div>
                    <ul>
                        <li v-for="item in brandList" :key="item.id" @click="pin(item.id)">
                            <img :src="item.pic_url"  width="100%" alt="">
                            <h4>{{item.name}}</h4>
                            <p>{{item.floor_price | RMBNumber}}</p>
                        </li>
                    
                    </ul>
                </div>
            </div>
             <!-- /品牌制造商直供 -->
            <br>
            <br>
             <!-- 周一周四·新品首发 -->
             <div class="xinpinshoufa">
                <h4>周一周四·新品首发</h4>
                <ul>    
                    <li v-for="item in newGoodsList" :key="item.id" @click="xiangqing(item.id)">
                        <img width=" 100%" :src="item.list_pic_url" alt="">
                        <div class="wenzi">{{item.name}}</div>
                        <div class="qian">{{item.retail_price | RMBNumber}}</div>
                    
                   
                    </li>
                </ul>
             </div>
             <!-- /周一周四·新品首发 -->

             <!-- 人气推荐 -->
             <div class="renqituijian">
                <h4>人气推荐</h4>
                <div class="renqi" v-for="item in hotGoodsList" :key="item.id">
                    <div class="zuo" >
                        <a href="">
                            <img :src="item.list_pic_url" alt="" width="88" height="88">
                        </a>
                    </div>
                    <div class="zuo">
                        <p style="margin-bottom:.1rem">{{item.name}}</p>
                        <p style="margin-bottom:.1rem">{{item.goods_brief}}</p>
                        <p style="color:#8d0000;">{{item.retail_price  | RMBNumber}}</p>
                    </div>
                </div>
                
             </div>

             <!-- 专题精选 -->
             <div class="zhuantijingxuan">
                <h4 class="zhuanti">专题精选</h4>
                <van-swipe :loop="false" width="100%" :show-indicators="false">
                    <van-swipe-item v-for="item in topicList" :key="item.id">
                    <img :src="item.scene_pic_url" alt="" width="90%" height="200px" />
                    <div class="zhuan1">
                        <p>
                        {{ item.title }}<span class="jiage">{{ item.price_info | RMBNumber}}</span>
                        </p>
                    </div>
                    <p class="zt11">{{ item.subtitle }}</p>
                    </van-swipe-item>
                </van-swipe>
             </div>
             <br>
             <br>
             <!-- 居家 -->
             <div class="jujia" >
                <div class="xinpinshoufa" v-for="(item,index) in categoryList" :key="item.id" >
                    <h4>{{item.name}}</h4>
                    <ul>    
                        <li v-for="item in categoryList[index].goodsList" :key="item.id">
                            <img width=" 100%" :src="item.list_pic_url" alt="">
                            <div class="wenzi">{{item.name}}</div>
                            <div class="qian">{{item.retail_price | RMBNumber}}</div>
                        
                       
                        </li>
                    </ul>
                 </div>
                

             </div>
             
             <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    
</template>

<script>
/* import Vue from 'vue';
import { Button,Stepper } from 'vant';
// import Button from 'vant/lib/button';
Vue.use(Button);
Vue.use(Stepper); */
// import axios from 'axios'
import {GetHomeList,} from "@/request/api.js"
export default {
    
    name: 'WorkspaceJsonHome',

    data() {
        return {
            value:"",
            banners:[],
            channels:[],
            brandList:[],
            newGoodsList:[],
            topicList:[],
            hotGoodsList:[],
            categoryList:[],
            goodsList:[]

        };
    },

    mounted() {
        
    },

    methods: {
        showPopup(){
            // console.log(123);
            // 完成路由跳转
            this.$router.push("/home/searchPopup")
        },
        shouyefenlei(){
            this.$router.push("/404")
        },
        pin(id){
            // console.log(id);
            this.$router.push({
                path:'/pinp',
                query:{id}
            })
        },
        xiangqing(v){
            this.$router.push('/xiangqing?id='+v);
        }
    },
    created(){
       /*  axios.get("/api/index/index")
        .then(res=>{
            console.log(res);
        }) */
        // GetHomeList() == axios.get("/index/index")
        GetHomeList()
        .then(res=>{
            if(res.errno==0){
                // console.log(res.data.categoryList);
                // console.log(res);
                this.banners=res.data.banner
                this.channels=res.data.channel
                this.brandList=res.data.brandList
                this.newGoodsList=res.data.newGoodsList
                this.topicList=res.data.topicList
                this.hotGoodsList=res.data.hotGoodsList
                this.categoryList=res.data.categoryList
            }
            else{
                // console.log(res.errno);
            }
           
        })
    }
}
</script>

<style lang="less" scoped>
    
      /*p{
        font-size: .16rem;
      }*/
      //品牌直招
      .pinpaizhizao{
        background-color: #fff;
        margin-top: .2rem;
      }
      .pinpaiwenzi{
        font-size: .2rem;
        text-align: center;
        padding: .15rem 0;
      }
      .pinpaizhizao ul{
        
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pinpaizhizao ul>li{
        width: 49%;
        position: relative;
    
    }
    .pinpaizhizao ul>li>h4{
        position: absolute;
        top: 10px;
        left: 10px;
    
    }
    .pinpaizhizao ul>li>p{
        position: absolute;
        top: 40px;
        left: 10px;
        color: #8b0000;
    }
    //新品首发
    .xinpinshoufa{
        background-color: #fff;
    }
    .xinpinshoufa>ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
    }
    .xinpinshoufa>ul>li{
        width: 49%;
        background: #fff;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .xinpinshoufa>ul>li>.qian{
        margin-top: 5px;
        color: darkred;
    }
    .xinpinshoufa>ul>li>.wenzi{
        font-size: .15rem;
    }
    .xinpinshoufa>h4{
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: .18rem;
    }
    //人气推荐
    .renqituijian{
        margin-top: .1rem;
        background-color: #fff;
        .renqi{
            display: flex;
            background-color: #fafafa;
            margin-top: .1rem;
        }
        .zuo{
            margin: .15rem;
        }
        .you{

        }
    }
    .renqituijian>h4{
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: .18rem;
        background-color: #fff;

    }
    /*专题*/
    .zhuantijingxuan{
        background-color: #fff;
        
    }
   .zhuanti {
        margin-top: 20px;
        padding-top: 15px;
        text-align: center;
        font-size: 0.2rem;
        padding-bottom: 0.1rem;
        
    }
    .zhuantijingxuan .jiage{
        color: darkred;
    }

   
</style>